<template>
  <view class="mobile_content">
    <!-- 手机号 -->
    <view class="input_box flex">
      <image
        src="/static/auth/login/email.png"
        style="width: 42rpx; height: 47rpx"
      />
      <input
        type="text"
        class="input_number flex1"
        :placeholder="$t('mf.auth.input_email')"
        placeholder-style="color: #BEBEBE;"
        v-model="form.username"
      />
    </view>
    <!-- 验证码 -->
    <view class="input_box flex">
      <image
        src="/static/auth/login/code2.png"
        style="width: 47rpx; height: 38rpx"
      />
      <input
        type="number"
        class="input_number flex1"
        :placeholder="$t('mf.auth.input_code')"
        placeholder-style="color: #BEBEBE;"
        v-model="form.code"
      />
      <cloudSendCode
        style="flex-shrink: 0"
        v-model="form.username"
        type="email_register"
        category="email"
      >
      </cloudSendCode>
    </view>
    <!-- 密码 -->
    <view class="input_box flex">
      <image
        src="/static/auth/login/password.png"
        style="width: 42rpx; height: 47rpx"
      />
      <input
        v-if="hide1"
        type="password"
        class="input_number flex1"
        :placeholder="$t('account.forget.placeholder.password')"
        placeholder-style="color: #BEBEBE;"
        v-model="form.password"
      />
      <input
        v-else
        type="text"
        class="input_number flex1"
        :placeholder="$t('account.forget.placeholder.password')"
        placeholder-style="color: #BEBEBE;"
        v-model="form.password"
      />
      <view @click="hide1 = !hide1">
        <image v-if="hide1" src="/static/hide.png" class="eye_img" />
        <image v-else src="/static/no_hide.png" class="eye_img" />
      </view>
    </view>
    <!-- 确认密码 -->
    <view class="input_box flex">
      <image
        src="/static/auth/login/password2.png"
        style="width: 42rpx; height: 47rpx"
      />
      <input
        v-if="hide2"
        type="password"
        class="input_number flex1"
        :placeholder="$t('account.forget.placeholder.confim')"
        placeholder-style="color: #BEBEBE;"
        v-model="form.config_password"
      />
      <input
        v-else
        type="text"
        class="input_number flex1"
        :placeholder="$t('account.forget.placeholder.confim')"
        placeholder-style="color: #BEBEBE;"
        v-model="form.config_password"
      />
      <view @click="hide2 = !hide2">
        <image v-if="hide2" src="/static/hide.png" class="eye_img" />
        <image v-else src="/static/no_hide.png" class="eye_img" />
      </view>
    </view>
    <!-- 邀请码 -->
    <view class="input_box flex">
      <image
        src="/static/auth/login/yao.png"
        style="width: 38rpx; height: 47rpx"
      />
      <input
        type="text"
        class="input_number flex1"
        :placeholder="$t('account.register.placeholder.invite')"
        placeholder-style="color: #BEBEBE;"
        v-model="form.invite_code"
      />
    </view>
    <!-- 注册 -->
    <button class="reg_btn" @tap.stop="registerNow">
      {{ $t("account.register.title") }}
    </button>
  </view>
</template>

<script>
import { mapActions } from "vuex";
const graceChecker = require("@/graceUI/jsTools/graceChecker.js");
export default {
  data() {
    return {
      form: {
        username: null,
        code: null,
        password: null,
        config_password: null,
        invite_code: null,
      },
      hide1: true,
      hide2: true,
    };
  },
  methods: {
    ...mapActions("user", ["mobileRegister"]),
    async registerNow() {
      // 表单验证
      const rule = [
        {
          name: "username",
          checkType: "email",
          errorMsg: this.$t("account.tips.mail_not_right"),
        },
        {
          name: "password",
          checkType: "string",
          checkRule: "8,",
          errorMsg: this.$t("account.tips.password_length", { length: 8 }),
        },
        {
          name: "config_password",
          checkType: "samewith",
          checkRule: "password",
          errorMsg: this.$t("account.tips.password_not_same"),
        },
        {
          name: "code",
          checkType: "string",
          checkRule: "4,6",
          errorMsg: this.$t("account.tips.captcha_length"),
        },
      ];
      var checkRes = graceChecker.check(this.form, rule);
      if (checkRes) {
        await this.mobileRegister(this.form);
        this.makeToast(this.$t("account.tips.register_success"));
        setTimeout(() => {
          this.handleNavLogin();
        }, 1000);
      } else {
        this.makeToast({ title: graceChecker.error, icon: "none" });
      }
    },
  },
};
</script>

<style scoped>
.input_box {
  width: 100%;
  height: 96rpx;
  background: linear-gradient(270deg, #1b1b2b 0%, #232534 100%);
  box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.5);
  border-radius: 24rpx;
  margin-bottom: 39rpx;
  align-items: center;
  padding: 0 50rpx;
  box-sizing: border-box;
}
.input_box image {
  height: 48rpx;
  width: 32rpx;
  margin-right: 20rpx;
}
.sms {
  display: flex;
  align-items: center;
}
.sms_number {
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #555555;
  font-size: 30rpx;
  margin-right: 10rpx;
}
.sms image {
  width: 30rpx;
  height: 30rpx;
}
.input_number {
  height: 98rpx;
  line-height: 98rpx;
  font-size: 30rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  padding: 0 20rpx;
  color: #fff;
}
.reg_btn {
  text-align: center;
  line-height: 100rpx;
  width: 100%;
  height: 100rpx;
  background-image: url("/static/auth/login/btn_bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-radius: 55rpx;
  font-size: 34rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #2b2c3e;
  margin-bottom: 60rpx;
  margin-top: 80rpx;
}
.input_box .eye_img {
  width: 32rpx;
  height: 32rpx;
}
</style>